<template>
  <div id="visualData4">
    <div class="button-wrapper">
      <div class="title_device_state">
        <span>设备状态：</span>
        <span class="device_state">{{ state ? '运行中' : '已停止' }}</span>
      </div>
<!--      <button class="visualData4_button" role="button" @click="changeShow">知识图谱</button>-->
    </div>
    <div>
      <iframe
        :src="videoUrl"
        width="600"
        height="400"
        id="ysOpenDevice"
        allowfullscreen
      ></iframe>
    </div>
  </div>
</template>

<script>
import {getVideoUrl} from '@/api/screen/screen'

export default {
  data() {
    return {
      videoShow: true,
      imagePath: require('@/assets/images/image1.png'),
      state: false,
      videoUrl: '' // 视频文件路径
    };
  },
  mounted() {
    this.fetchData();
    this.scheduleNextVideoFetch();
  },
  methods: {
    changeShow() {
      this.videoShow = !this.videoShow;
    },
    fetchData() {
      getVideoUrl().then(res => {
        console.log("视频", res.data);
        this.videoUrl = res.data["url"];
        console.log("视频url", this.videoUrl);
      });
    },
    scheduleNextVideoFetch() {
      this.videoFetchTimer = setInterval(() => {
        this.fetchData(); // 每0.5分钟执行一次
      }, 1000 * 60 * 60 * 24); // 转换为毫秒
    },
  }
};
</script>

<style scoped lang="scss">
#visualData4 {
  padding: .2em;
}

iframe {
  width: 100%;
  height: 515px;
  border: none;
}

.title_device_state {
  text-align: left;
  margin-top: 12px;
  font-size: 20px;
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow: 0 0 10px #d2b4ce,
  0 0 8px #008cff,
  0 0 2px #fff;

  .device_state {
    font-size: 26px;
    text-shadow: 0 0 10px #6e7559,
    0 0 8px #83d52c,
    0 0 2px #fff;
  }
}

.button-wrapper {
  margin: 1rem;
  display: flex;
  justify-content: space-between;
}

.visualData4_button:hover {
  background-color: #1795bb;
}

.visualData4_button:active {
  background-color: #1795bb;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.visualData4_button {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #9fb9c4;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 15rem;
  height: 3rem;
  font-size: 1.3rem;
  line-height: 1rem;
}

.visualData4_button:before {
  content: "";
  background: linear-gradient(
      45deg,
      #5baee8,
      #06c0f8,
      #6d97b6
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-visualData4_button 20s linear infinite;
  transition: opacity 3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-visualData4_button {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.visualData4_button:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #1e4577;
  left: 0;
  top: 0;
  border-radius: 10px;
}
</style>
